Why

The mobile hamburger menu is not currently accessible either by keyboard or screenreader, per issue #978 .

What

As noted by @bacitracin in #978 , the required change is extremely simple. We just add a tabIndex onto the mobile nav toggle and the browser takes care of the rest.

NB

I've added a comment to the ticket which follows this one, #979 , but the menu items for the mobile menu are accessible via tab...but only at the very very end of the tab order, past the bottom of the page. This is because the mobile menu is loaded into the html at the very end of the document, in spite of being located within the Header component in the React code. I don't know why this would be! Possibly not an issue since we want to access them via keyboard up-down arrows anyway, but thought it would be worth noting in case anyone has insights.

Screen captures of current behavior in prod and locally

Current behavior in production:

(User tabs through page, starting with main Clean & Green Philly icon in nav, and tabs directly into the page content without accessing the Menu hamburger toggle.)

Adjusted behavior in local with these changes:

(User tabs through page and successfully tabs to Menu hamburger toggle, which opens and closes appropriately on Enter.)

Steps to test

• Pull down these changes to your local machine
• Build changes with usual steps
• Observe the page at a width < 850px to see mobile menu
• Tab through the page until you successfully focus the mobile
• Mobile should display appropriate focus styles (a standard blue halo around the element)
• On key press Enter or Space the menu should open
• Hitting the Enter or Space key again should close the menu